<template>
  <div style="background-color:#ffffff;padding: 24px">
    <a-tabs type="card">
      <a-tab-pane key="1" tab="店铺主页橱窗">
        <a-card title="店铺公告" style="width: 600px">
          <a-row>
            <a-col :span="4">
              公告标题：
            </a-col>
            <a-col :span="20">
              <a-input placeholder="请填写公告标题，最多50字"/>
            </a-col>
          </a-row>
          <a-row style="margin-top: 16px">
            <a-col :span="4">
              公告内容：
            </a-col>
            <a-col :span="20">
              <a-textarea placeholder="请填写公告内容，最多500字" :rows="3""/>
            </a-col>
          </a-row>
        </a-card>
        <div style="margin-top: 16px"><a-button type="primary">添加模块</a-button></div>
        <div style="margin-top: 16px"><a-button type="primary">保存</a-button></div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="店铺商品排序">
        <a-table :columns="columns" :data-source="data"></a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: '商品名称',
    dataIndex: 'age',
    key: 'age',
    align: 'center'
  },
  {
    title: '商品价格',
    dataIndex: 'address',
    key: 'address 1',
    align: 'center'
  },
  {
    title: '销量',
    dataIndex: 'address',
    key: 'address 2',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'address',
    key: 'address 3',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'address',
    key: 'address 3',
    align: 'center'
  }
]
const data = []
export default {
  name: 'StoreDecorate',
  data () {
    return {
      data,
      columns
    }
  }
}
</script>

<style scoped>

</style>
